<template>
	<div class="card-main">
		<div class="card-main-title flex align-center" @click="handleNoticeLinkto()">
			<strong>通知 |</strong>
			<el-tag effect="plain" class="card-main-tag">{{ noticeItem.readFlag == 1 ? '已读' : '未读' }}</el-tag>
			<p>{{ noticeItem.noticeTitle }}</p>
		</div>

		<div class="card-main-tip flex align-center">
			<img src="@/assets/icons/time.webp" alt="" class="icon-img" />
			<span v-if="statisticsTime">更新时间：{{ statisticsTime }} </span>
		</div>
		<ul class="card-main-content flex align-center">
			<li class="item flex1" v-for="(item, index) in dataList" :key="index">
				<p class="label">{{ item.label }}</p>
				<p class="value" style="cursor: pointer">{{ item.value }}</p>
			</li>
		</ul>
		<!-- 弹出框 -->
		<el-dialog v-model="dialogTableVisible" title="" style="width: 500px" append-to-body>
			<el-table :data="tableDataOrganization" border v-loading="tableLoading">
				<el-table-column align="center" prop="areaName" label="区域" />
				<el-table-column align="center" prop="areaNum" :label="selectStatistics">
					<template #default="{ row }">
						<div @click="clickTableCell(row, 1, 10)" style="cursor: pointer">
							{{ row.areaNum }}
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 区域列表弹出框 -->
		<el-dialog v-model="areaVisible" title="" width="75%" append-to-body>
			<el-table v-if="areaVisible" :data="areaTableData" border v-loading="areaTableLoading">
				<el-table-column show-overflow-tooltip align="center" v-for="item in areaTableColumn" :property="item.prop" :label="item.label" />
			</el-table>
			<div style="display: flex; justify-content: flex-end; margin-top: 15px">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:page-sizes="[10, 20, 30, 40]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="tableTotal"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
		</el-dialog>
		
		<el-dialog v-model="visibleNotice"  width="45%">
			<NoticeDetail :nowRowData="noticeItem"></NoticeDetail>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import apiMod from '@/apiMod/index'
import { getStore } from '@/utils/store'
import { configTableColumn } from './config'
import { getAreaObj } from '@/utils/util'
import NoticeDetail from '../../NoticeAnnounce/NoticeDetail/index.vue'

const userInfo = getStore('userInfo') || {}
const noticeItem = ref({} as any)
const statisticsTime = ref('')
const visibleNotice = ref(false)
const dataList = ref([
	{ label: '服务对象', value: '' },
	{ label: '服务组织', value: '' },
	{ label: '从业人员', value: '' },
	{ label: '服务工单', value: '' },
	{ label: '养老服务委托运营单位', value: '' },
])

const dialogTableVisible = ref(false)
const tableLoading = ref(false)
const selectStatistics = ref('')
const tableDataOrganization = ref([])
//获取列表
const showList = async (item) => {
	selectStatistics.value = item.label
	if (item.data.length <= 0) {
		ElMessage({
			message: '无数据',
			type: 'warning',
		})
	} else {
		dialogTableVisible.value = true
		tableDataOrganization.value = item.data.map((item) => {
			return {
				...item,
				value: item.areaNum,
			}
		})
		tableLoading.value = false
	}
}
//区域列表的变量和表格
const areaVisible = ref(false)
const areaTableLoading = ref(false)
const areaTableData = ref([])
const areaTableColumn = ref([])

let pageApiQuery = {
	areaId: userInfo.authArea,
}

const currentPage = ref(1)
const pageSize = ref(10)
const tableTotal = ref(0)

const handleSizeChange = (val: number) => {
	currentPage.value = 1
	pageSize.value = val
	clickTableCell(pageApiQuery, currentPage.value, pageSize.value)
}
const handleCurrentChange = (val: number) => {
	currentPage.value = val
	clickTableCell(pageApiQuery, currentPage.value, pageSize.value)
}

//获取每一区域的分页列表
const clickTableCell = async (val, current, size) => {
	console.log(val, 'valval')
	pageApiQuery = val
	if (val.value == 0) {
		ElMessage({
			message: '无数据',
			type: 'warning',
		})
		return
	}
	areaVisible.value = true
	areaTableLoading.value = true
	let data = {
		areaId: val.areaId || '',
		current,
		pageParaPO: { total: val.value, size, current },
		size,
	}
	const { column, api } = configTableColumn[val.belongElement]
	areaTableColumn.value = column || []

	apiMod[api](data).then((res) => {
		const data = res.data
		areaTableData.value = data.records.map((item, index) => {
			const nowAreaObj: any = getAreaObj(item, 'now', 'set')
			const nowUnitObj: any = getAreaObj(item, 'unit', 'set')

			item.serialNum = (current - 1) * size + index + 1
			item.region_name = getAreaObj(item, '')
			item.region_org_name = nowAreaObj.names
			item.region_unit_name = nowUnitObj.names
			if (item.contactUserPhone) {
				item.contactUserPhone = item.contactUserPhone.replace(item.contactUserPhone.substring(5, 9), '****')
			}
			if (item.phone) {
				item.phone = item.phone.replace(item.phone.substring(5, 9), '****')
			}

			if (item.idCard) item.idCard = item.idCard.replace(item.idCard.substring(3, 16), '****')
			return item
		})
		tableTotal.value = data.total
	})
	areaTableLoading.value = false
}

const getInitData = () => {
	apiMod.view_sysNoticeRecordByBsc_page().then((res) => {
		const dataItem = res.data.records[0] || {}
		noticeItem.value = dataItem || {
			noticeTitle: '市指导中心上传了《关于印发《南京市社区居家养老服务管理规定（试行）》的通知》',
			readFlag: 1,
		}
	})

	apiMod
		.view_dpStatistics_search({
			belongStatics: 'management',
		})
		.then((res) => {
			const data = res.data || {}
			const getDataValue = (prop) => {
        if(!data[prop]) {
          return {
            value:0,
            data:[]
          }
        }
				statisticsTime.value = data[prop][0].createTime
        const totalAreaNum = data[prop].map(item=>+item.areaNum).reduce((a,b)=>a+b)
				return {
					value: totalAreaNum || 0,
					data: data[prop],
				}
			}
			dataList.value = [
				{ label: '服务对象', ...getDataValue('服务对象') },
				{ label: '服务组织', ...getDataValue('服务组织') },
				{ label: '从业人员', ...getDataValue('从业人员') },
				{ label: '服务工单', ...getDataValue('服务工单') },
				{ label: '养老服务委托运营单位', ...getDataValue('养老服务委托单位') },
			]
		})
}

const handleNoticeLinkto = () => {
	visibleNotice.value = true
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.card-main {
	min-width: vw(500);
	color: #fff;
	border-radius: 10px;
	height: 215px;
	padding: vw(15);
	background: linear-gradient(129.65deg, #487fef 0%, #6d9bf9 100%);
	display: flex;
	flex-flow: column;
	justify-content: space-around;

	&-title {
		height: 55px;
		border-radius: 10px;
		background: #ffffff2f;
		padding: vw(15);
		color: #fff;
	}

	&-tag {
		background: #ffffff3b;
		color: #fff;
		margin: 0 6px;
	}

	&-tip {
		color: #ffffff76;

		.icon-img {
			width: vw(16);
			height: vw(16);
			margin-right: 6px;
		}
	}

	&-content {
		font-family: 'Bahnschrift';
		text-align: left;
		color: #fff;
		flex-flow: row wrap;
		font-weight: 400;

		.item {
			.label {
				font-size: 16px;
			}

			.value {
				font-size: 32px;
			}
		}
	}

	:deep(.el-table tr) {
		font-weight: normal;
	}
}
</style>
